<template>
    <nav class="nav-bar">
      <!-- 左侧返回按钮 -->
      <div class="nav-bar__left" @click="handleLeftClick">
        <slot name="left">
          <div v-if="showBack" class="nav-bar__back">
            <svg class="nav-bar__back-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15 19L8 12L15 5" stroke="#7a60f4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
        </slot>
      </div>

      <!-- 中间标题 -->
      <div class="nav-bar__title">
        <slot name="title">
          {{ title }}
        </slot>
      </div>

      <!-- 右侧功能按钮 -->
      <div class="nav-bar__right" @click="handleRightClick">
        <slot name="right">
          <button v-if="rightText && rightText !== '购物车'" class="nav-bar__right-button cart-icon">{{ rightText }}</button>
          <!-- <button v-if="rightText && rightText === '购物车'" class="nav-bar__right-button-cart cart-icon">
            <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M39 32H13L8 12H44L39 32Z" fill="#f3f0ff"/><path d="M3 6H6.5L8 12M8 12L13 32H39L44 12H8Z" stroke="#8a57f5" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><circle cx="13" cy="39" r="3" stroke="#8a57f5" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><circle cx="39" cy="39" r="3" stroke="#8a57f5" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>

          </button> -->
        </slot>
      </div>
    </nav>
  </template>

  <script setup>
  import { defineProps, defineEmits } from 'vue';

  const props = defineProps({
    // 标题文字
    title: {
      type: String,
      default: '标题'
    },
    // 是否显示返回按钮
    showBack: {
      type: Boolean,
      default: true
    },
    // 右侧按钮文字
    rightText: {
      type: String,
      default: ''
    },
    // 是否固定在顶部
    fixed: {
      type: Boolean,
      default: false
    }
  });

  const emit = defineEmits(['click-left', 'click-right']);

  const handleLeftClick = () => {
    emit('click-left');
  };

  const handleRightClick = () => {
    emit('click-right');
  };
  </script>

  <style lang="scss" scoped>
  $gray: #f3f0ff;
  $purple:#f3f0ff;
  .nav-bar {
    display: flex;
    align-items: center;
    height: 44px;
    box-sizing: border-box;
    position: relative;
    background-color:  $gray;

    &__left, &__right {
      flex: 1;
      display: flex;
      align-items: center;
      height: 100%;
    }

    &__left {
      justify-content: flex-start;
    }

    &__right {
      justify-content: flex-end;
    }

    &__title {
      flex: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      color: #333333;
    }

    &__back {
      display: flex;
      padding-left: 10px;
      align-items: center;
      height: 100%;
      cursor: pointer;

      &-icon {
        width: 24px;
        height: 24px;
      }
    }

    &__right {
      &-button {
        font-size: 14px;
        background-color: $purple;
        color: #333333;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin: 10px;
        padding:5px;

        &-cart{
          width: 44px;
          height: 44px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          border:none;

        }
      }
    }
  }

  // 固定在顶部的样式
  .nav-bar--fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
  }
  </style>
